<style lang="less">
    @import '../../styles/loading.less';
</style>

<template>
    <div>
        <Col span="12">
            <Card>
                <p slot="title" style="height:25px;">
                    <Icon type="plus-round"></Icon>新增检疫单
                </p>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <Form-item label="检疫单号" prop="quarantine_sn">
                        <Input v-model="formValidate.quarantine_sn" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="自动获取" prop="">
                        <Button type="primary" @click="autoGet(formValidate.quarantine_sn)">点击获取</Button>
                    </Form-item>
                    <Form-item label="货主" prop="name">
                        <Input v-model="formValidate.detail.name" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="起运地点" prop="from_add">
                        <Input v-model="formValidate.detail.from_add" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="到达地点" prop="to_add">
                        <Input v-model="formValidate.detail.to_add" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="承运人" prop="haulier">
                        <Input v-model="formValidate.detail.haulier" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="开证方式" prop="open_type">
                        <Input v-model="formValidate.detail.open_type" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="开证状态" prop="open_status">
                        <Input v-model="formValidate.detail.open_status" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="开证时间" prop="time">
                        <Input v-model="formValidate.detail.time" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="耳标" prop="ear_marks">
                        <Input v-model="formValidate.ear_marks" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="凭证照片" prop="imgs">
                        <div v-if="formValidate.imgs.length" >
                            <img v-for="img in formValidate.imgs" :src="img" style="margin: 10px;">
                        </div>
                        <uploadImg v-if="formValidate.imgs.length<5" v-on:uploadImg="uploadImg"></uploadImg>
                    </Form-item>


                    <Form-item>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </Form-item>
                </Form>
            </Card>
        </Col>
    </div>
</template>

<script>
    import uploadImg from '../website/upload';
    export default {
        components:{
            'uploadImg':uploadImg,
        },
        data () {
            return {
                formValidate: {
                    quarantine_sn: '',
                    ear_marks: '',
                    detail: {},
                    imgs: [],
                },
                ruleValidate: {
                    quarantine_sn: [
                        { required: true, message: '检疫单号不能为空' },
                        { type: 'string', max: 20, message: '最多为20位' },
                    ],
                    ear_marks: [
                        { required: true, message: '请输入耳标,多个耳标请用逗号","隔开' }
                    ]
                },
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let url = 'admin/pig/addQuarantine';
                        let postData = this.formValidate;
                        this.$http.post(url, this.$qs.stringify(postData)).then((res) => {
                            var d = res.data;
                            if (d.code == 0) {
                                this.$Notice.success({
                                    title: 'Success',
                                    desc: '操作成功'
                                });
                                this.$router.push({
                                    name: 'quarantineList'
                                });
                            } else {
                                this.$Notice.error({
                                    title: 'Error Warning',
                                    desc: `Error：${d.msg}<br>`
                                });
                            }
                        });
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            uploadImg (data) {
                console.log(data);
                var img_arr = this.formValidate.imgs;
                if (img_arr.length >= 5) {
                    this.$Message.error('最多添加5张图片');
                } else {
                    img_arr.push(data);
                }
            },
            autoGet (quarantine_sn) {
                if (quarantine_sn) {
                    this.$http.post('admin/pig/autoGet', this.$qs.stringify({quarantine_sn:quarantine_sn})).then((res) => {
                        var d = res.data;
                        if (d.code == 0) {
                            this.formValidate.detail = d.data;
                        } else {
                            this.$Message.error('获取失败，请手动添加');
                        }
                    });
                }
            },
        }
    };
</script>
